<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户名和密码验证</title>
    <script src="jquery.min.js"></script>
    <style>
        .over {
            background: greenyellow;
        }
        .out {
            background: gold;
        }
        .error {
            color: red;
            background: blue;
            display: none;    
        }
        .info {
            width: 800px;
        }
    </style>
    <script>
        // function submit(){
        //     alert('提交用户名和密码信息给后台');
        // }
        // function reset() {
        //     alert('重置表单信息全部为空');
        //     $('.input').val('');
        // }
        // function changevent(event) {
        //     if(event.keyCode==13) {
        //         console.log('回车发生了');
        //         event.keyCode=9;
        //     }
        // }
    </script>
</head>
<body>
    <!-- action属性的值，为某个页面的地址。当表单提交后，表单内容将发送给action所指定的页面 -->
    <form action="" name="" mehtod="post">
        <!-- 刷新页面光标自动获取在用户名输入框  属性autofocus 回车后光标定位到下一个input，对于当前input来说也相当于失去焦点。所以回车为什么不能触发失去焦点的事件？？？？？？？？？？？？？？？？-->
        用户名：<input id="username" class="input" type="text" name="user" placeholder="请输入用户名" maxlength="5" onblur="javascript:blurevent();" autofocus onkeypress="if(event.keyCode==13) focusnext(this);">
        <span class="error" id="error_username"></span>
        <!-- 用户名输入完回车后，判断用户名是否合法，是否已经被使用。如果不合法就报错，提示用户重新输入;如果合法就自动将光标定位到下一个input框. -->
        <br>

        密码：<input type="password" id="password" class="input" title="密码必须8位，且只包含字母和数字" maxlength="8" onkeypress="if(event.keyCode==13) focusnext(this);">
        <span class="error" id="error_password"></span>
        <br>

        <!-- 回车判断密码是否正确，如果密码确认不正确，提示错误，并且置空确认密码输入框。如果正确，回车后光标消失 。反馈框出现提示信息。 -->
        确认密码：<input type="password" id="confurm" class="input" title="请再次确认密码" maxlength="8">
        <span class="error" id="error_confurm"></span>
        <br>

        <!--  提交后信息返回到反馈中；readonly只读属性-->
        用户输入信息的反馈：<input type="textarea" class=" info" readonly><br>

        <!-- 点击出现动画 -->
        <!-- <input type="submit" onmouseover="this.className='over'" onmouseout="this.className='out'" onclick="javascript:submit();">
        <input type="reset" onmouseover="this.className='over'" onmouseout="this.className='out'" onclick="javascript:reset();"> -->
        <input type="submit" onmouseover="this.className='over'" onmouseout="this.className='out'" id="submit" class=>
        <input type="reset" onmouseover="this.className='over'" onmouseout="this.className='out'" id="reset" class=>
    </form>
    

    <script>
        // 回车自动移动光标到下一个input ??????????????????????????????????????????????????????????????
        var inputs = $('.input');
        function focusnext(e) {         
            // console.log(inputs);
            for(var i=0;i<inputs.length;i++) {//遍历几个input输入框
                console.log(inputs[i]);
                // 如果当前input是最后一个input,就让第一个input框获得焦点
                if(i==(inputs.length-1)){
                    // inputs[0].prop('autofocus',autofocus);
                    console.log('最后一个input回车成功了');
                    inputs.eq(0).user.focus();
                    // document.user.focus();
                    break;
                }
                else if(e==inputs[i]) {
                    // inputs[i+1].prop('autofocus',autofocus);
                    inputs.eq(i+1).focus();
                }
            }
        }
        
        // 用户名输入框失去焦点时，判断输入的用户名是否为空，是否合法
        function blurevent() {
            // alert('失去焦点了');
            var US=document.getElementById('username');
            var text = US.value;
            var span1 = document.getElementById('error_username');
            if(text=="") {
                // alert('用户名不能为空');
                span1.style.display="inline-block";
                span1.innerHTML="用户名不能为空！";
            }
            else if(text=="法轮功") {
                span1.style.display="inline-block";
                span1.innerHTML="用户名不合法，请重新输入！";
            } 
            else {
                span1.style.display="inline-block";
                span1.innerHTML="***合法*****";
            }
        }

        

        // jquery  循环input输入框  通过获得和失去光标，控制span标签的显隐
        $(function() {
            $.each($('.input'),function(i,e){
                    // 输入框获得光标，span标签隐藏
                    $(this).on('focus',function(i){
                        $(this).siblings('span').css("display",'none');
                    }),
                    // 点击输入框，输入框内容置空
                    $(this).on('mousedown',function() {
                        // ????????????type=submit  type=button???????????????????????????????????????????????
                        // if($(this).not(':submit,:reset')){
                            $(this).val('');
                        // } 
                    })
                          
            })

            // 如果用户名为空，点击其后的输入框都会直接弹出“请先输入用户名”
            if($('#username').val()==""){
                $('.input:not(#username)').on('focus',function() {
                    if($('#username').val()==""){
                        $('#error_username').css("display",'inline-block');
                        $('#error_username').html("请先输入用户名！！");
                        // 将光标定位到用户名输入
                        $('#username').attr('autofocus','autofocus');
                    }
                })
            }else{
                return;
            }

            // 密码输入框失去焦点时
            $('#password').on('blur',function() {
                // if($('#username').val()==""){
                //     $('#error_password').css("display",'inline-block');
                //     $('#error_password').html("请先输入用户名！！");
                //     return;
                // }
                 if($(this).val()=="") {
                    // alert('密码不能为空');
                    $('#error_password').css("display",'inline-block');
                    $('#error_password').html("密码不能为空！");
                }
                else if($(this).val()=="********") {
                    $('#error_password').css("display",'inline-block');
                    $('#error_password').html("密码只能包含数字和字母！");
                }
                else if($(this).val().length<8) {
                    $('#error_password').css("display",'inline-block');
                    $('#error_password').html("密码必须8位数字或字母！！");
                }
                else {
                    $('#error_password').css("display",'inline-block');
                    $('#error_password').html("****合法*****");
                } 
            })

            // 确认密码输入框的失去获得焦点事件
            $('#confurm').on('blur',function() {
                if($(this).val()=="") {
                    // alert('密码不能为空');
                    $('#error_confurm').css("display",'inline-block');
                    $('#error_confurm').html("请再次确认密码");
                }
                else if($(this).val().length<8) {
                    $('#error_confurm').css("display",'inline-block');
                    $('#error_confurm').html("密码格式不正确！！！");
                }
                // 判断两次密码输入是否一致
                else if($(this).val()!==$('#password').val()) {
                    $('#error_confurm').css("display",'inline-block');
                    $('#error_confurm').html("两次密码输入不一致！！！");
                }
                else {
                    $('#error_confurm').css("display",'inline-block');
                    $('#error_confurm').html("****密码确认无误*****");
                } 
            })

            // 提交
            $('#submit').on('click',function() {
                // 点击按钮将所有的提示隐藏
                $('span').css("display",'none');
                var txt = "您的用户名为："+$('#username').val()+"密码为："+$('#password').val();
                // alert("您的用户名为："+$('#username').val()+"密码为："+$('#password').val());
                if($('#username').val()==""){
                    alert("用户名不能为空")
                }
                else if($('#password').val()==""){
                    alert("密码不能为空")
                }
                else if($('#confurm').val()==""){
                    alert("未确认密码")
                }else{
                    alert(txt);
                    $('.info').val(txt);
                }
            })

            // 重置
            $('#reset').on('click',function() {
                // 点击按钮将所有的提示隐藏
                $('span').css("display",'none');

                if($('#username').val()==""){
                    alert("用户名不能为空")
                }
                else if($('#password').val()==""){
                    alert("密码不能为空")
                }
                else if($('#confurm').val()==""){
                    alert("未确认密码")
                }
                else {
                    // alert('重置表单信息全部为空');
                    $('.input').val('');
                    $('.info').val('');
                }
            })

        })

         
        

        

                

        
    </script>


</body>
</html>